<template>
    <div class="record">
        <!--<h5><a href="javascript:;"><</a> <span>交易记录</span></h5>-->
        <ul class="nav-tab">
            <li>
                <div>
                <a href="javascript:;">我的买单</a>
                </div>
            </li>
            <li class="li2">
                <div>
                <a href="javascript:;">我的卖单</a>
                </div>
            </li>
        </ul>
        <div class="wire"></div>
        <div class="list">
            <ul>
                <li>
                    <div class="left">
                        <p class="p2">买家ID：4545454</p>
                        <p class="p4">数量：30</p>
                    </div>
                    <div class="right">
                        <p class="p4">已结束</p>
                        <p class="p3">2018-7-24</p>
                    </div>
                </li>
            </ul>
            <ul>
                <li>
                    <div class="left">
                        <p class="p2">买家ID：4545454</p>
                        <p class="p4">数量：30</p>
                    </div>
                    <div class="right">
                        <p class="p4 p5">未交易</p>
                        <p class="p3">2018-7-24</p>
                    </div>
                </li>
            </ul>
            <ul class="ul3">
                <li>
                    <div class="left">
                        <p class="p2">买家ID：4545454</p>
                        <p class="p4">数量：30</p>
                    </div>
                    <div class="right">
                        <p class="p4 p5 p6">进行中</p>
                        <p class="p3">2018-7-24</p>
                    </div>
                </li>

            </ul>
            <div class="btn"><button>确认付币</button></div>
        </div>
    </div>
</template>

<script>
    export default {
      name: 'Record'
    }
</script>

<style scoped>

    .record{
        font-size: 0.3rem;
    }
    .record h5{
        height: 0.9rem;
        line-height: 0.9rem;
        margin: 0;
        font-weight: normal;
        background-color: #537fbf;
        color: #fff;
        display: flex;
    }
    .record h5 a{
        font-size: 0.4rem;
        text-decoration: none;
        color: #fff;
        flex-grow: 1;
        margin-left: 0.4rem;
    }
    .record h5 span{
        flex-grow:2 ;
        padding-left: 1rem;
    }
    .nav-tab{
        display: flex;
        list-style: none;
        height: 1rem!important;
        margin: 0;
        line-height: 1rem;

    }
    .nav-tab li{
        flex-grow: 1;
        text-align: center;
    }
    .nav-tab li div{
      width: 1.8rem;
      margin: 0 auto;
    }

    .nav-tab li a{
        color: #666;
    }
    .nav-tab li a:hover{
        color: #7294c8;
    }
    .nav-tab li div:hover{
       border-bottom: 2px solid #7294c8;
    }
    .wire{
        height: 0.1rem;
        background-color: #fafafa;
    }
    .list ul{
        border-bottom: 0.01rem solid #eeeeee;
    }
    .list .ul3{
        border-bottom:none;
    }
    .list li{
        display: flex;
    }
    .list .left{
        flex-grow: 1;
        padding-left: 0.4rem;
    }
    .list .right{
        flex-grow: 1;
        width: 2.5rem;
        text-align: right;
        padding-right: 0.4rem;
    }
    p{
      line-height: 1rem;
    }
    .list .p3{
        font-size: 0.2rem;
    }
    .list .p3,.p4{
        color: #999;
    }
    .list .p5{
        color: #fbb752;
    }
    .list .p6{
        color: #57a94f;
    }
     .btn{
        width: 6.7rem;
        height: 0.9rem;
        margin: 0 auto;
    }
     button{
        width: 6.7rem;
        height: 0.9rem;
        background-color: #537fbf;
        font-size: 0.28rem;
        color: #fff;
       margin-top: 0.39rem;
        border: 0;
    }
</style>
